import appStore from '@/store/index'; // 导入状态管理仓库
import { ref } from 'vue'; // 从Vue框架中导入ref函数，用于创建响应式数据

const store = appStore(); // 获取应用的状态管理实例
// 定义远端屏幕的宽度和高度配置
const remoteVideoCssConfig = {
  smallWidth: '240px', // 小屏幕宽度
  smallHeight: '180px', // 小屏幕高度
  bigWidth: '800px', // 大屏幕宽度
  bigHeight: '600px', // 大屏幕高度
};

const isBigScreen = ref(false); // 创建响应式数据，用来表示当前屏幕是大屏幕还是小屏幕
export function useToggleBigScreen(id: string) {
  // 根据传入的元素id切换屏幕大小
  const videoContainer = document.getElementById(id); // 获取对应id的DOM元素
  if (videoContainer) { // 如果元素存在
    const computedStyle = window.getComputedStyle(videoContainer); // 获取该元素的当前计算样式
    if (computedStyle.width === remoteVideoCssConfig.smallWidth) {
      // 如果当前样式宽度等于小屏幕宽度，则说明它是小屏幕
      isBigScreen.value = false; // 设置状态为小屏幕
    } else {
      isBigScreen.value = true; // 否则设置为 大屏幕
    }
  }
  transformToSmallScreen(); // 调用函数，将所有其他视频变为小屏幕
  if (videoContainer) { // 再次检查元素是否存在
    if (!isBigScreen.value) { // 如果当前是小屏幕
      // 设置元素的样式为大屏幕
      videoContainer.style.width = remoteVideoCssConfig.bigWidth;
      videoContainer.style.height = remoteVideoCssConfig.bigHeight;
      videoContainer.style.objectFit = 'contain'; // 设置objectFit属性为contain
      videoContainer.style.marginRight = '0'; // 设置marginRight为0
    } else {
      setSmallScreen(videoContainer); // 否则，将屏幕设置为小屏幕
    }
  }
}
const transformToSmallScreen = () => {
  // 将所有远端视频流变为小屏幕
  const remoteStreams = store.remoteStreams; // 获取远端视频流数组
  remoteStreams.forEach((remote) => { // 遍历远端视频流数组
    const id = remote.getId(); // 获取每个视频流的id
    const videoContainer = document.getElementById(id); // 根据id获取对应的DOM元素
    if (videoContainer) { // 如果元素存在
      setSmallScreen(videoContainer); // 将对应的视频设置为小屏幕
    }
  });
};
const setSmallScreen = (videoContainer: HTMLElement) => {
  // 设置视频为小屏幕的样式
  videoContainer.style.width = remoteVideoCssConfig.smallWidth; // 设置宽度
  videoContainer.style.height = remoteVideoCssConfig.smallHeight; // 设置高度
  videoContainer.style.objectFit = 'cover'; // 设置objectFit属性为cover
  videoContainer.style.marginRight = '26px'; // 设置右边距
};